<template>
	 <div class="historyBuy" :style="{ backgroundColor:  moduleData.base.bc }" @click.stop="controlClick" v-if="historyBuyerList.length > 0">
	 	<img :src="curBuyer.userImgUrl" alt="用户头像">
		 <div class="userName">{{ curBuyer.userNickName }}刚刚下单啦</div>
	 </div>
</template>

<script>
	import { getHistoryBuyer } from '@/api/api.js'
	export default{
		 props:{
			 moduleData: {
				 type: Object,
				 default: {}
			 }
		 },
		 data(){
			 return {
				 historyBuyerList: [],
				 curBuyer: {
					 userImgUrl: '',
					 userNickName: ''
				 },
				 st: '',
				 index: 1
			 }
		 },
		 
		 computed: {
		 },
		mounted() {
			getHistoryBuyer().then(res => {	//获取历史购买者
				this.historyBuyerList = res.data.appOrderUser
				this.curBuyer = this.historyBuyerList[0]
				this.changeBuyer()
			})
		},
		 methods:{
			  changeBuyer() {
				  this.st = setInterval(() => {
					  this.curBuyer = this.historyBuyerList[this.index]
					  this.index == this.historyBuyerList.length - 1 ? this.index = 0 : this.index++
				  }, 3000)
			  },
			  controlClick(){
				  console.log('pp', this.$parent)
					if(!this.prev){
						this.$parent.controlClick(this.title.type);
					}
				}
		 }
	}
</script>

<style lang="scss" scoped>
.historyBuy {
	display: flex;
	align-items: center;
    width: 130px;
	height: 40px;
    position: fixed;
    top: 230px;
	border-radius: 20px;
	color: #fff;
	margin-left: 20px;
	padding: 0 10px;
	z-index: 100000000;
	animation: animation1 3s linear infinite;
	img {
		width: 30px;
		height: 30px;
		border-radius: 15px;
	}
	.userName {
		width: 100%;
		height: 30px;
		margin-left: 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}
@keyframes animation1 {
	0% {
		margin-left: -100px;
		opacity: 0;
	}
	35% {
		margin-left: 0px;
		opacity: 1;
	}
	50% {
		margin-left: 40px;
		opacity: 1;
	}
	80% {
		margin-left: 40px;
		opacity: 0;
	}
	100% {
		margin-left: -100px;
		opacity: 0;
	}
}
</style>
